<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <button>还原</button>
   <ul>
      
   </ul>
</body>
</html>
<script>
//    let obj = {
//     name: "李四"
//    }
//    let obj1 = obj;
//    obj1.name = "王五";
//    console.log(obj);

   // obj 是一个引用数据类型。值存在堆中。

   let arr = ['窗前明月光','疑似地上霜','举头望明月','低头思故乡'];
   let saveArr = [...arr];
   render();
   function render(){
    let str = '';
    arr.forEach((item,index) => {
        str+=`<li onclick="del(${index})">${item}</li>`
    });
    document.querySelector('ul').innerHTML = str;
   }
   function del(i){
     arr.splice(i,1);
     render();
   }


   document.querySelector('button').onclick = function(){
      console.log(saveArr);
      arr = [...saveArr];
      render();
   }

//    // 深拷贝的方法？
//    let arr1 = [{name:"李四",eat:function(){}}]; // 扩展运算符不能实现深拷贝 （只能拷贝一层）
// //    let arr2 = [...arr1];
// //    arr2[0].name = "王五";
// //    console.log(arr1);

// //  JSON.parse(JSON.stringify()) 可以来实现深拷贝
// // 注意：使用其来进行深拷贝，不能拷贝函数
//    let arr2 = JSON.parse(JSON.stringify(arr1));
//    arr2[0].name = "王五";
//    console.log(arr1);
//    console.log(arr2);

   function copy(obj) {
    let newObj = null; // 声明一个对象来存储拷贝之后的内容
    
    // 判断数据类型是否是复杂的数据类型，如果是则调用自己，如果不是则直接赋值即可！
    // 由于null不可以循环但是他的类型又是object，所以这个需要对null进行判断
    debugger
    if (typeof(obj) == 'object' && obj !== null){
        // 声明一个变量用以存储拷贝出来的值，根据参数的具体数据类型声明不同的类型来存储
        newObj = obj instanceof Array? [] : {};
        // 循环obj的每一项，如果里面还有复杂的数据类型的话，则直接利用递归函数再次调用。
        for(let i in obj){
            newObj[i] = copy(obj[i])
        }
    } else {
        newObj = obj
    }
    return newObj; // 函数没有返回的值的话，则为undefined
}

let obj2 = {name:'李四',age:18};

// for (let key in obj2) { // 当 for in 循环对象的时候，key 是属性名，循环数组的时候key是索引值。
//     console.log(obj2[key]);
// }

// for of 不能循环对象。
// for (const iterator of [1,2,3]) {
//     console.log(iterator);
// }
// newObj['name'] = "test"

let obj = { // 原对象，包含字符串，对象，函数，数组等不同类型。
   name: "test",
   main:{
       a:1,
       b:2
   },
   fn:function(){
       
   },
   firends:[1,2,3,[44,55]]
}
let obj1 = copy(obj);
obj1.main.a = 3;
console.log(obj);
console.log(obj1);
</script>